<template>
	<!-- 卡片 -->
	<div class="card">
		<!-- 中间大头 -->
		<div class="head">
			<!-- <img src="../../images/images/head_12.png" alt=""> -->
			<img :src="this.$store.state.avator" alt="">
		</div>
		<!-- 内圈 -->
		<div class="innring">
			<div class="inn_col">
				<img class="inn_pic" :src="imgUrls[Math.floor(Math.random()*imgUrls.length)]" alt="">
				<img class="inn_pic" :src="imgUrls[Math.floor(Math.random()*imgUrls.length)]" alt="">
			</div>
			<div class="inn_row">
				<div class="r_col">
					<img class="inn_pic" :src="imgUrls[Math.floor(Math.random()*imgUrls.length)]" alt="">
					<img class="inn_pic" :src="imgUrls[Math.floor(Math.random()*imgUrls.length)]" alt="">
				</div>
				<div class="r_col">
					<img class="inn_pic" :src="imgUrls[Math.floor(Math.random()*imgUrls.length)]" alt="">
					<img class="inn_pic" :src="imgUrls[Math.floor(Math.random()*imgUrls.length)]" alt="">
				</div>
			</div>
			
		</div>
		<!-- 外圈 -->
		<div class="outring">
			<div class="out_row">
				<div class="o_col">
					<img class="out_pic" :src="imgUrls[Math.floor(Math.random()*imgUrls.length)]" alt="">
					<img class="out_pic" :src="imgUrls[Math.floor(Math.random()*imgUrls.length)]" alt="">
				</div>
				<div class="o_col">
					<img class="out_pic" :src="imgUrls[Math.floor(Math.random()*imgUrls.length)]" alt="">
					<img class="out_pic" :src="imgUrls[Math.floor(Math.random()*imgUrls.length)]" alt="">
				</div>
			</div>
			<div class="out_row_1">
				<div class="o_col_1">
					<img class="out_pic_col" :src="imgUrls[Math.floor(Math.random()*imgUrls.length)]" alt="">
					<img class="out_pic_col" :src="imgUrls[Math.floor(Math.random()*imgUrls.length)]" alt="">
				</div>
				<div class="o_col_1">
					<img class="out_pic_col" :src="imgUrls[Math.floor(Math.random()*imgUrls.length)]" alt="">
					<img class="out_pic_col" :src="imgUrls[Math.floor(Math.random()*imgUrls.length)]" alt="">
				</div>
			</div>
			<div class="out_row_2">
				<img class="out_pic" :src="imgUrls[Math.floor(Math.random()*imgUrls.length)]" alt="">
				<img class="out_pic" :src="imgUrls[Math.floor(Math.random()*imgUrls.length)]" alt="">
			</div>
			<div class="out_col">
				<img class="out_pic_col" :src="imgUrls[Math.floor(Math.random()*imgUrls.length)]" alt="">
				<img class="out_pic_col" :src="imgUrls[Math.floor(Math.random()*imgUrls.length)]" alt="">
			</div>
		</div>
		<!-- 尾部按钮 -->
		<div class="footer">
			<span>下载欢遇APP，红娘帮你撮合和TA们的桃花缘！</span>
			<button>立即下载</button>
		</div>
		<!-- 动画 -->
		<ani></ani>
	</div>
</template>

<script>
	import ani from "@/components/base/animation.vue";
	import gamedata from "@/data/gameData.json";
	
	export default{
		data() {
			return {
				imgUrls:{},
				imageurl:{}
			}
		},
		mounted() {
			if(this.$route.query.gender==1){
				let imgUrl = gamedata.avatarData.femalePicUrl;
				this.imgUrls = imgUrl;
				// console.log(imgUrl);
				
				return
			}
			if(this.$route.query.gender==2){
				let imgUrl = gamedata.avatarData.malePicUrl;
				this.imgUrls = imgUrl;
				// console.log(imgUrl);
				return
			}
		},
		methods:{
			baseUrl(){
				
			}
		},
		components:{
			ani
		}
	}
</script>

<style lang="scss">
	@function px2vw($px){
		@return $px/7.5*1vw
	};
	.card{
		width: px2vw(698);
		height: px2vw(836);
		
		position: relative;
		left: 50%;
		margin-left: px2vw(-349);
		margin-top: px2vw(146);
		
		background-image: url(../../images/images/kapian_03.png);
		background-repeat: no-repeat;
		background-size: px2vw(698) px2vw(836);
	}
	.head{
		width: px2vw(174);
		height: px2vw(174);
		z-index: 99;
		
		position: absolute;
		left: 50%;
		margin-left: px2vw(-87);
		top: px2vw(233);
		
		>img{
			width: px2vw(174);
			height: px2vw(174);
			border-radius: 50%;
		}
	}
	.innring{
		width: px2vw(400);
		height: px2vw(407);
		z-index: 9;
		// background-color: #42B983;
		
		position: absolute;
		left: 50%;
		margin-left: px2vw(-200);
		top: px2vw(116);
	}
	.inn_col{
		width: px2vw(93);
		height: px2vw(407);
		position: absolute;
		left: 50%;
		margin-left: px2vw(-46.5);
		
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-between;
	}
	.inn_row{
		width: px2vw(400);
		height: px2vw(230);
		position: absolute;
		top: 50%;
		margin-top: px2vw(-115);
		
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.r_col{
		height: px2vw(230);
		
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-between;
	}
	.inn_pic{
		width: px2vw(93);
		height: px2vw(93);
		border-radius: 50%;
	}
	// 外圈
	.outring{
		width: px2vw(596);
		height: px2vw(560);
		// background-color: darkgreen;
		
		position: absolute;
		left: 50%;
		margin-left: px2vw(-298);
		top: px2vw(39);
	}
	.out_row{
		width: px2vw(326);
		height: px2vw(440);
		position: absolute;
		top: 50%;
		margin-top: px2vw(-220);
		left: 50%;
		margin-left: px2vw(-163);
		
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.o_col{
		height: px2vw(440);
		
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-between;
	}
	.out_row_1{
		width: px2vw(536);
		height: px2vw(276);
		position: absolute;
		top: 50%;
		margin-top: px2vw(-138);
		left: 50%;
		margin-left: px2vw(-268);
		
		display: flex;
		align-items: center;
		justify-content: space-between;
		>div{
			opacity: 0.5;
		}
	}
	.o_col_1{
		height: px2vw(276);
		
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-between;
	}
	.out_row_2{
		width: px2vw(596);
		height: px2vw(58);
		position: absolute;
		top: 50%;
		margin-top: px2vw(-29);
		
		display: flex;
		justify-content: space-between;
	}
	.out_col{
		width: px2vw(48);
		height: px2vw(560);
		position: absolute;
		left: 50%;
		margin-left: px2vw(-24);
		
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-between;
		>img{
			opacity: 0.5;
		}
	}
	
	.out_pic_col{
		width: px2vw(48);
		height: px2vw(48);
		border-radius: 50%;
	}
	.out_pic{
		width: px2vw(60);
		height: px2vw(60);
		border-radius: 50%;
	}
	
	.footer{
		width: px2vw(567);
		height: px2vw(149);
		// background-color: #42B983;
		
		position: absolute;
		left: 50%;
		margin-left: px2vw(-277);
		bottom: px2vw(55);
		
		>span{
			font-size: px2vw(26.04);
			font-weight: 500;
			color: #ffffff;
			text-align: center;
			letter-spacing:0.3px;
			margin: 0 auto;
		};
		>button{
			width: px2vw(458);
			height: px2vw(83);
			margin: 0 auto;
			margin-top: px2vw(24);
			
			background-image: url(../../images/images/button_03.png);
			background-repeat: no-repeat;
			background-size: px2vw(458) px2vw(83);
			border-radius: px2vw(40);
			display: block;
			font-size: px2vw(35);
			font-weight: bold;
			color: #ae037c;
			letter-spacing:3px;
			outline:none;
		}
	}
</style>
